<template>
	<div class="Icon">
		<ul>
		    <swiper :options="swiperOption">
		   	     <swiper-slide v-for="(item,key) in pages" :key='key'>
			    			<li v-for="pp in item" :key='pp.id'>
			    				<img :src="pp.imgurl"/>
			    				<p>{{pp.title}}</p>
			    			</li>  	
			    </swiper-slide>
			    <div class="swiper-pagination"  slot="pagination"></div>
		    </swiper>
		  </ul>
	</div>
</template>

<style scoped>
	.Icon{
		width: 100%;
		height: 2rem;
		background: white;
	}
	.Icon ul{
		width:100%;
		
	}
	.Icon ul li{
		width:25%;
		height: 0.8rem;
		float: left;
		list-style: none;
		margin-top: 0.1rem;
	}
    .Icon ul li p{
		font-size: 0.15rem;
		color: #212121;
		text-align: center;
		margin-top: 0.1rem;
	}
	.Icon img{
		width: 0.55rem;
		height: 0.55rem;
		margin:0 auto;
		display: block;
	}
	/*.swiper >>>.swiper-pagination-bullet-active {
		background: deepskyblue;
	}*/
	
	.swiper-pagination{
		bottom: -0.08rem;
	}
	.swiper-wrapper{
		overflow:auto;
	}
	
</style>

<script>
	export default{
		data(){
		  return{
		  	  iconlist:[
		  	  {
		  	  	id:1,
		  	  	imgurl:"http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" ,
		  	  	title:"景点门票"
		  	  },
		  	  
		  	  {
		  	  	id:2,
		  	  	imgurl:"http://img1.qunarzz.com/piao/fusion/1803/95/8246f27355943202.png" ,
		  	  	title:"景点门票"
		  	  },
		  	  
		  	  {
		  	  	id:3,
		  	  	imgurl:"http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png" ,
		  	  	title:"景点门票"
		  	  },
		  	  
		  	  {
		  	  	id:4,
		  	  	imgurl:"http://img1.qunarzz.com/piao/fusion/1803/96/c70f1e85ae4a4f02.png" ,
		  	  	title:"景点门票"
		  	  },
		  	  
		  	  {
		  	  	id:5,
		  	  	imgurl:"http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png" ,
		  	  	title:"景点门票"
		  	  },
		  	  
		  	  {
		  	  	id:6,
		  	  	imgurl:"http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png" ,
		  	  	title:"景点门票"
		  	  },
		  	  
		  	  {
		  	  	id:7,
		  	  	imgurl:"http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png" ,
		  	  	title:"景点门票"
		  	  },
		  	  
		  	  {
		  	  	id:8,
		  	  	imgurl:"http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png" ,
		  	  	title:"景点门票"
		  	  },
		  	  
		  	  {
		  	  	id:9,
		  	  	imgurl:"http://img1.qunarzz.com/piao/fusion/1803/47/c2b659e048b11602.png" ,
		  	  	title:"景点门票"
		  	  },
		  	  
		  	  {
		  	  	id:10,
		  	  	imgurl:"http://img1.qunarzz.com/piao/fusion/1803/b8/c5dcdb58deec2402.png" ,
		  	  	title:"景点门票"
		  	  }
		  	  
		  	]
		  }
		},
		
		computed:{
			pages(){
				var iconarr=[];
				this.iconlist.forEach((i,index)=>{
					var idx=Math.floor(index/8);
					if(!iconarr[idx]){
						iconarr[idx]=[]
					};
					iconarr[idx].push(i);
				})
				return iconarr;
				
			}
			
		}
			
	}
	
	
</script>
